import React, { Component } from 'react';
import { Link, routerRedux } from 'dva/router';
import { connect } from 'dva';

import { List, InputItem, Button, Toast, Flex,Icon} from 'antd-mobile';
import { createForm } from 'rc-form';
import MyScroll from '../../components/MyScroll/MyScroll';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import { editAddress } from './editAddress.less';





class EditAddress extends Component {
    constructor(props) {
        super(props);
        this.state={

        }
    }

    componentDidMount(){
        this.props.dispatch({type:"accountManagement/addressDetailEFF",obj:this.props.match.params.data});
        console.log(this.props.match.params.data)
    }
    onReg = ()=>{
        const { Consignee, phone, address } = this.props.form.getFieldsValue();
        if (!Consignee) {
            Toast.info('请输入收货人姓名', 1.5);
            return;
        }
        if (!phone) {
            Toast.info('请输入收货人电话', 1.5);
            return;
        }
        if (!address) {
            Toast.info('请输入收货人地址',1.5);
            return;
        }


        this.props.dispatch({ type: 'accountManagement/editAddressEFF', obj: { trueName	:Consignee,mobPhone:phone,address:address} }).then((r)=>{
            if (r.code == 200) {
                Toast.success(r.msg, 1.5, ()=>{
                    this.props.dispatch(routerRedux.replace({
                        pathname: '/addressList',
                    }))
                });
            } else {
                Toast.fail(r.msg, 1.5);
            }
        });
    }

    render() {
        const { getFieldProps, getFieldError } = this.props.form;
        const {list=[]} = this.props.accountManagement;
        console.log(list)
        return (
            <Flex style={{
                height:"100%"
            }} direction="column"
                  className={editAddress}
            >
                {this.props.match.params.data==" "?<div style={{width:"100%"}}>
                    <NavTopBar title="添加收货地址" dispatch={this.props.dispatch}/>
                    <MyScroll>
                        <form style={{width:"100%"}}>
                            <List
                                renderFooter={() => getFieldError('Consignee') && getFieldError('Consignee').join(',')}
                            >
                                <InputItem
                                    {...getFieldProps('Consignee')}
                                    clear
                                    placeholder="请输入收货人姓名"
                                >收货人 : </InputItem>
                                <InputItem
                                    {...getFieldProps('phone')}
                                    clear
                                    placeholder="请输入收货人手机号码"

                                >手机号 : </InputItem>
                                <InputItem
                                    {...getFieldProps('region')}
                                    clear
                                    placeholder="请输入收货人所在地区"
                                >所在地区 :
                                </InputItem>
                                <InputItem
                                    {...getFieldProps('address')}
                                    clear
                                    placeholder="请输入收货人详细地址"
                                >详细地址
                                </InputItem>
                            </List>
                        </form>
                    </MyScroll>
                </div>: <div style={{width:"100%"}}>
                    <NavTopBar title="编辑收货地址" dispatch={this.props.dispatch} rightContent={<span onClick={()=>{
                        this.props.dispatch({type:"accountManagement/delAddressEFF",obj:this.props.match.params.data}).then((r)=>{
                            if(r.code==200){
                                Toast.success('删除成功', 1.5,()=>{
                                    this.props.dispatch(routerRedux.goBack());
                                });
                            }
                        })
                    }}>删除</span>} />
                    <MyScroll>
                        <form style={{width:"100%"}}>
                            <List
                                renderFooter={() => getFieldError('Consignee') && getFieldError('Consignee').join(',')}
                            >
                                <InputItem
                                    {...getFieldProps('Consignee')}
                                    clear
                                    placeholder={list.trueName}
                                >收货人 : </InputItem>
                                <InputItem
                                    {...getFieldProps('phone')}
                                    clear
                                    placeholder={list.mobPhone}
                                >手机号 : </InputItem>
                                <InputItem
                                    {...getFieldProps('region')}
                                    clear
                                    placeholder={list.areaInfo}
                                >所在地区 :
                                </InputItem>
                                <InputItem
                                    {...getFieldProps('address')}
                                    clear
                                    placeholder={list.address}
                                >详细地址
                                </InputItem>
                            </List>
                        </form>
                    </MyScroll>
                </div>  }
                <Button style={{backgroundColor:"#ff0036",color:"#fff",width:"100%",position:"fixed",bottom:"0"}} onClick={this.onReg}>保存</Button>
            </Flex>
        );
    }
}

export default connect(({ accountManagement }) => ({ accountManagement }))(createForm()(EditAddress));